$(function () {
    // 参数设置为全局对象，后面筛选和分页用到
    let layer = layui.layer
    let q = {
        pagenum: 1,      //	是	int	页码值
        pagesize: 3,    //	是	int	每页显示多少条数据
        cate_id: "",     //	否	string	文章分类的 Id
        state: "",       //	否	string	文章的状态，可选值有：已发布、草稿
    }
    // 需求1：初始化文章列表 - 封装成函数，以后重复用
    initArticleList()
    function initArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            params: q
        }).then(({ data: res }) => {
            // console.log(res);
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            // 渲染
            let arr = []
            res.data.forEach(ele => {
                arr.push(`
                    <tr>
                        <td>${ele.title}</td>
                        <td>${ele.cate_name}</td>
                        <td>${getTime(ele.pub_date)}</td>
                        <td>${ele.state}</td>
                        <td>
                            <button class="layui-btn btn-edit layui-btn-xs">修改</button>
                            <button data-id="${ele.Id}" class="del-btn layui-btn del-edit layui-btn-xs layui-btn-danger">删除</button>
                        </td>
                    </tr>
                `)
            })

            // 循环结束 赋值
            $("tbody").empty().html(arr.join(""))

            // 分页
            renderPage(res.total)
        })
    }

    // 需求2：初始化文章分类列表 - 封装成函数
    // 渲染筛选中的文章列表
    let form = layui.form
    initArtCateList()
    function initArtCateList() {
        axios({
            method: 'get',
            url: '/my/article/cates'
        }).then(({
            data: res
        }) => {
            // console.log(res);
            if (res.status !== 0) {
                return layer.msg(res.message)
            }
            // 成功渲染            
            let arr = ['<option >请选择文章分类</option>']
            res.data.forEach(ele => {
                arr.push(`
            <option value="${ele.Id}">${ele.name}</option>
                `)
            })

            // 循环结束赋值
            let str = arr.join('')
            $("[name=cate_id]").empty().html(str)
            // form.render();可以渲染layui中的select/checkbox/radio
            form.render()
        })
    }

    // 需求3：筛选
    $("#searchForm").on('submit', function (e) {
        e.preventDefault()
        q.cate_id = $("[name=cate_id]").val()
        q.state = $("[name=state]").val()
        initArticleList()
    })



    // 需求4：分页
    function renderPage(total) {
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'pageBox',//注意，这里的 test1 是 ID，不用加 # 号
            count: total, //数据总数，从服务端得到
            limit: q.pagesize,
            curr: q.pagenum,
            layout: ['count', 'limit', 'prev', 'page', 'next', 'refresh', 'skip'],
            limits: [2, 3, 5, 8, 10],

            /* 页面加载的时候，页码切换的时候触发，每页显示条数改变的时候会触发 */
            jump: function (obj, first) {
                /*  obj包含了当前分页的所有参数，比如  */
                //    console.log(obj.curr);
                // console.log(obj.limit);

                if (!first) {
                    // 把当前页改变，重新渲染文章列表
                    q.pagenum = obj.curr
                    q.pagesize = obj.limit
                    initArticleList()
                }
            }
        });
    }

    //需求5：删除 - 事件委托/类名/id
    $("tbody").on('click', '.del-btn', function () {
        let id = $(this).attr('data-id')
        layer.confirm('是否确认删除?', { icon: 3, title: '提示' }, function (index) {
            //do something
            // 删除的Ajax
            axios({
                method: 'GET',

                // 保留/   删除：
                url: '/my/article/delete/' + id
            }).then(({ data: res }) => {
                // console.log(res);
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                // 成功提示 ,刷新页面
                layer.msg(res.message)

                /* (删除Ajax成功后)当我们再次发起请求的时候，如果页面中还有一条数据，当前页--，当前页大于等于2有资格 */
                // if ($('.del-btn').length == 1 && q.pagenum >= 2) q.pagenum--
                // 优化 - 短路运算，前面的代码满足条件，后面的才执行
                $('.del-btn').length == 1 && q.pagenum >= 2 && q.pagenum--
                initArticleList()
            })

            layer.close(index);
        });
    })

})